<template>
  <div class="tc fs-6 p-5">后台管理简易版本</div>

  <!-- 数据表格 -->
  <div>
    顶顶顶
    <NDataTable :loading="loading" :data="list" :columns="columns"></NDataTable>
  </div>

  <!-- 分页信息 -->
  <div>
    <NFlex justify="center"
      ><NPagination
        v-model:page="page.pageNumber"
        :page-size="page.pageSize"
        :item-count="page.total"
        @update-page="query"
      ></NPagination
    ></NFlex>
  </div>
</template>

<script setup lang="ts">
import { ref, h, onMounted } from 'vue'
import { useMessage, NDataTable, NButton, NPagination, NFlex, NSpace } from 'naive-ui'
import type { DataTableColumn } from 'naive-ui'
import type { BaseDataResult, PageBean, PageVo } from '@/types/BaseResult'
import { Api } from '@/types/Api'
import { Tools } from '@/types/Tools'
import type { TbMessage } from '@/types/message'
const message = useMessage()

const loading = ref(false)

// #region 查询的部分
const page = ref({ pageNumber: 1, pageSize: 5 } as PageBean)
const list = ref([] as Array<TbMessage>)

const columns = ref([
  {
    title: '标题',
    key: 'title',
  },
  {
    title: '删除理由',
    key: 'reason',
  },
  {
    title: '发布时间',
    key: 'lastupdate',
    render(row) {
      return Tools.formatDate(row.lastupdate as number, 'yyyy-MM-dd hh:mm:ss')
    },
  },
  {
    title: '操作',
    key: 'action',
    render(row) {
      return h(NSpace, {}, [
        h(
          NButton,
          {
            size: 'small',
            type: 'info',
            onClick: () => {},
          },
          '查看帖子',
        ),
        h(
          NButton,
          {
            size: 'small',
            type: 'info',
            onClick: () => {},
          },
          '查看举报原因',
        ),
        h(
          NButton,
          {
            size: 'small',
            type: 'error',
            onClick: () => showDelete(row),
          },
          '删除',
        ),
      ])
    },
  },
] as DataTableColumn<TbMessage>[])

const requery = () => {
  page.value.pageNumber = 1
  query()
}

const query = () => {
  loading.value = true
  Api.get(
    `/admin/message/${page.value.pageSize}/${page.value.pageNumber}`,
    {},
    (data: BaseDataResult<PageVo<TbMessage>>) => {
      loading.value = false
      if (data.success) {
        list.value = data.data.list
        page.value = data.data.pageBean
        return
      }
      message.error(data.message)
    },
  )
}

onMounted(() => {
  query()
})
// #endregion
</script>
<style scoped></style>
